<template>
	<!-- 日期选择弹出框 -->
	<uni-popup ref="popup" type="bottom">
		<view class="select-time">
			<view class="time-top">
				<text>选择送达时间</text>
				<image src="./img/time-close.png" mode="" @tap="closeTime"></image>
				<view class="clear"></view>
			</view>
			<view class="time-box">
				<scroll-view scroll-y="true" class="date">
					<view class="date-item" :class="{'date-item-active' : index==dateIndex}" v-for="(item,index) in date" :key="index"
					 @click="selectDate(index)">{{item}}</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="time">
					<view class="time-item" v-for="(item,index) in time" :key="index" @click="selectTime(index)">
						<text :class="{'time-item-active' : index==timeIndex}">{{item}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="time-btn">
				<button @click="bindDeFind">确定</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import serviceTime from './serviceTime.js'
	import {
		getCatDate
	} from '@/util/time.js'
	export default {
		props: {
			status: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				date: ['今天', '明天'],
				dateUp: [],
				dateIndex: 0,
				time: [],
				timeIndex: 0,
			}
		},
		methods: {
			// 关闭弹出框
			closeTime: function() {
				this.$refs.popup.close()
			},

			// 选择日期
			selectDate: function(index) {
				this.dateIndex = index;
				this.getCatTime();
			},

			// 选择时间
			selectTime: function(index) {
				this.timeIndex = index
			},

			// 点击确定
			bindDeFind: function() {
				this.$emit('bindDeFind', `${this.dateUp[this.dateIndex]} ${this.time[this.timeIndex]}`)
				this.$refs.popup.close()
				// console.log(this.dateUp[this.dateIndex])
			},

			// 获取日期函数
			getCatDate: function(num) {
				let day = new Date();
				day.setTime(day.getTime() + 24 * 60 * 60 * 1000 * num);
				return day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate();
			},

			// 获取时间函数
			getCatTime: function() {
				if (this.dateIndex == 1) { //明天
					this.time = serviceTime;
				} else {
					let time=[]
					let nowD = new Date().getTime() + 1 * 60 * 60 * 1000
					for (let i = 0; i < serviceTime.length; i++) {
						let d = new Date(`${this.dateUp[0]} ${serviceTime[i]}`).getTime();
						if (d > nowD) {
							time.push(serviceTime[i])
						}
					}
					this.time=time;
				}
			}
		},
		watch: {
			status: function(a, b) {
				this.$refs.popup.open()
			}
		},
		created() {
			this.dateUp[0] = this.getCatDate(0)
			this.dateUp[1] = this.getCatDate(1)
			this.getCatTime();
		},
		components: {
			uniPopup
		}
	}
</script>

<style scoped>
	.select-time {
		padding-top: 15rpx;
		background: #FFFFFF;
	}

	.time-top {
		text-align: center;
		color: #333333;
		font-size: 32rpx;
		margin-bottom: 28rpx;
	}

	.time-top>image {
		width: 25rpx;
		height: 25rpx;
		float: right;
		margin-top: 11rpx;
		margin-right: 32rpx;
	}

	.time-box {
		display: flex;
		height: 546rpx;
		font-size: 32rpx;
	}

	.date {
		height: 100%;
		width: 42%;
		background: #F5F5F5;
	}

	.date .date-item {
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		color: #999999;
		text-align: center;
	}

	.date .date-item-active {
		background: #FFFFFF;
		color: #333333;
		font-weight: 600;
	}

	.time {
		height: 100%;
		padding-left: 47rpx;



	}

	.time .time-item {
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		color: #333333;
	}

	.time .time-item-active {
		color: #FFC102;
		font-weight: 600;
		position: relative;

	}

	.time .time-item-active::before {
		content: "";
		width: 34rpx;
		height: 28rpx;
		background: url(./img/time-select.png) no-repeat;
		background-size: cover;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: -50rpx;
	}

	.time-btn {
		padding: 20rpx 32rpx;


	}

	.time-btn>button {
		width: 100%;
		height: 78rpx;
		line-height: 78rpx;
		background-color: #FFC102;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 39px;
	}
</style>
